import React, { Component } from "react";
import Carousel from "react-spring-3d-carousel";
import { v4 as uuidv4 } from 'uuid';
import { config, animated, useSpring } from "react-spring"; 
import rou from '../../picture/rou.jpg'

const Indicator = ({ currentIndex, totalSlides, goToSlide }) => {  
    
    const indicators = Array.from({ length: totalSlides }, (_, index) => index);  
    
    return (  
        <div style={{ position: 'relative', marginTop: '20px' }}>  
          {indicators.map(index => (  
            <animated.div  
              key={index}  
              style={{  

                background: currentIndex === index ? 'black' : 'gray', // 当前幻灯片的指示器为红色，其余为灰色  
                margin: '0 5px',  
                display: 'inline-block',  
                // 移除了transform属性，因此不再有旋转动画  
              }}  
              onClick={() => goToSlide(index)} // 点击指示器切换到对应的幻灯片  
            />  
          ))}  
        </div>  
      );  
};  


export default class Lunbotu extends Component {
    constructor(props) {  
        super(props);  
        this.state = {  
          goToSlide: 0,  
          currentIndex: 0,
          offsetRadius: 2,  
          showNavigation: true,  
          config: config.gentle,  
          autoPlay: true, // 添加一个状态来控制自动播放  
          slideInterval: null, // 用于存储setInterval的返回值  
        };  
      }  
      componentDidUpdate(prevProps, prevState) {  
        if (prevState.goToSlide !== this.state.goToSlide) {  
          // 当 goToSlide 状态变化时，确保 currentIndex 也随之更新  
          this.setState({ currentIndex: this.state.goToSlide });  
        }  
      }

      componentDidMount() {  
        if (this.state.autoPlay) {  
          this.startAutoPlay();  
        }  
      }  
      
      componentWillUnmount() {  
        if (this.state.slideInterval) {  
          clearInterval(this.state.slideInterval); // 清除定时器以避免内存泄漏  
        }  
      }  
      
      startAutoPlay = () => {  
        this.setState({  
          slideInterval: setInterval(() => {  
            let nextSlideIndex = (this.state.goToSlide + 1) % this.slides.length;  
            this.setState({ goToSlide: nextSlideIndex });  
          }, 3000) // 每3秒切换到下一张幻灯片  
        });  
      };  
      
      stopAutoPlay = () => {  
  if (this.state.slideInterval) {  
    console.log('Stopping autoplay...', this.state.slideInterval);  
    clearInterval(this.state.slideInterval);  
    this.setState({ slideInterval: null });  
  } else {  
    console.log('No slide interval to stop.');  
  }  
};  


      handleMouseEnter = () => {  
        this.stopAutoPlay();  
      };  
      
      handleMouseLeave = () => {  
        if (this.state.autoPlay) {  
          this.startAutoPlay();  
        }  
      };  

  slides = [
    {
      key: uuidv4(),
      content: <img src={rou} alt="1" />
    },
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/800/802/?random" alt="2" />
    },
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/600/803/?random" alt="3" />
    },
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/800/500/?random" alt="4" />
    },
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/800/804/?random" alt="5" />
    },
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/500/800/?random" alt="6" />
    },
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/800/600/?random" alt="7" />
    },
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/805/800/?random" alt="8" />
    }
  ].map((slide, index) => {
    return { ...slide, onClick: () => this.handleSlideClick(index) };
  });

  handleSlideClick = (index) => {  
    this.setState({ goToSlide: index });  
    if (this.state.autoPlay) {  
      this.stopAutoPlay(); // 当用户手动点击幻灯片时停止自动播放  
      console.log(`点击了第${index + 1}张幻灯片`);
    }  
  };

  onChangeInput = e => {
    this.setState({
      [e.target.name]: parseInt(e.target.value, 10) || 0
    });
  };

  onSlideChange = (currentIndex) => {  
    this.setState({ currentIndex }); // 直接更新currentIndex状态  
  };

  render() {
    return (
      <div style={{marginBottom:'5rem'}}>
      {/* <div style={{ width: '50rem', height: '27rem', position: 'absolute',border: '1px solid #ccc',opacity: '0.5',left:'50%',top:'50%',transform: 'translate(-46%, -60%)',borderRadius: '30px',opacity: '0.5'}}></div> */}
      <div style={{ width: "80%", height: "25rem", margin: "0 auto" }} >

        <div
          onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}
          style={{ width: '100%', height: '100%',marginTop:'0.5rem',padding:'2rem' }}
        >
            <Carousel
              slides={this.slides}
              goToSlide={this.state.goToSlide}
              offsetRadius={this.state.offsetRadius}
              showNavigation={false} // 隐藏默认导航箭头  
              animationConfig={this.state.config}
              onSlideChange={this.onSlideChange} // 更新当前幻灯片索引的回调   
              style={{ position: 'relative'}}
            />


        </div>
        <Indicator
          currentIndex={this.state.currentIndex}
          totalSlides={this.slides.length}
          goToSlide={index => this.setState({ goToSlide: index })}
        />
      </div>
      </div>
    );
  }
}

